<template>
	<view class="mine-container">
		<!-- 用户信息头部 -->
		<view class="user-header">
			<view class="user-avatar">
				<image :src="userInfo.avatar || '/static/default-avatar.png'" class="avatar" mode="aspectFill"></image>
			</view>
			<view class="user-info">
				<text class="user-name">{{ userInfo.name || '未登录' }}</text>
				<text class="user-desc" v-if="userInfo.desc">{{ userInfo.desc }}</text>
				<text class="user-desc" v-else>{{ isLogin ? '这个人很懒，什么都没有写～' : '登录后体验完整功能' }}</text>
			</view>
			<view class="login-btn" v-if="!isLogin" @click="handleLogin">
				<text>登录/注册</text>
			</view>
			<view class="logout-btn" v-else @click="handleLogout">
				<text>退出登录</text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-list">
			<view class="menu-item" v-for="item in menuList" :key="item.id" @click="handleMenuClick(item)">
				<view class="menu-left">
					<text class="menu-icon">{{ item.icon }}</text>
					<text class="menu-text">{{ item.name }}</text>
				</view>
				<text class="menu-arrow">></text>
			</view>
		</view>

		<!-- 收藏和历史记录页面会在跳转后显示 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {},
				menuList: [{
						id: 1,
						name: '我的收藏',
						icon: '⭐',
						requireLogin: true
					},
					{
						id: 2,
						name: '浏览历史',
						icon: '🕒',
						requireLogin: true
					},
					{
						id: 3,
						name: '消息通知',
						icon: '🔔',
						requireLogin: false
					},
					{
						id: 4,
						name: '设置',
						icon: '⚙️',
						requireLogin: false
					}
				]
			}
		},
		onShow() {
			this.checkLoginStatus();
		},
		methods: {
			checkLoginStatus() {
				const token = uni.getStorageSync('token');
				const userInfo = uni.getStorageSync('userInfo');
				
				if (token && userInfo) {
					this.isLogin = true;
					this.userInfo = userInfo;
				} else {
					this.isLogin = false;
					this.userInfo = {};
					// 清除可能存在的过期数据
					uni.removeStorageSync('token');
					uni.removeStorageSync('userInfo');
				}
			},

			handleLogin() {
				// 获取当前页面路径，用于登录后返回
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const route = currentPage.route;
				
				uni.navigateTo({
					url: `/pages/Login/Login?from=${route}`
				});
			},

			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除登录信息
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('favorites');
							uni.removeStorageSync('history');
							
							this.isLogin = false;
							this.userInfo = {};
							
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});

							// 更新底部标签文字
							this.updateTabBarText();
						}
					}
				});
			},

			updateTabBarText() {
				// 更新底部标签文字
				if (this.isLogin) {
					uni.setTabBarItem({
						index: 3, // 根据实际标签页索引调整
						text: '我的'
					});
				} else {
					uni.setTabBarItem({
						index: 3, // 根据实际标签页索引调整
						text: '未登录'
					});
				}
			},

			handleMenuClick(item) {
				// 检查是否需要登录
				if (item.requireLogin && !this.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						this.handleLogin();
					}, 1000);
					return;
				}

				switch (item.id) {
					case 1:
						uni.navigateTo({
							url: '/pages/favorites/favorites'
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/history/history'
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/notifications/notifications'
						});
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/settings/settings'
						});
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.mine-container {
		min-height: 100vh;
		background: #f5f5f5;
	}

	.user-header {
		background: linear-gradient(135deg, #007AFF, #00C6FF);
		padding: 60rpx 40rpx;
		display: flex;
		align-items: center;
		color: white;
		position: relative;
	}

	.user-avatar {
		margin-right: 30rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.user-desc {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.login-btn,
	.logout-btn {
		padding: 15rpx 30rpx;
		border: 2rpx solid white;
		border-radius: 50rpx;
		font-size: 28rpx;
		background: transparent;
		color: white;
	}

	.logout-btn {
		background: rgba(255, 255, 255, 0.2);
	}

	.menu-list {
		background: white;
		margin: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.2s;
	}

	.menu-item:active {
		background-color: #f8f8f8;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.menu-icon {
		margin-right: 20rpx;
		font-size: 36rpx;
		width: 50rpx;
		text-align: center;
	}

	.menu-text {
		font-size: 32rpx;
		color: #333;
	}

	.menu-arrow {
		color: #999;
		font-size: 28rpx;
	}
</style>